<template>
    <a-form class="comment_from" :model="formComment" @finish="onFinish" @finishFailed="onFinishFailed">
        <div class="header">
            <a-form-item name="author" class="item" :rules="formCommentRules.author">
                <a-input v-model:value="formComment.author" placeholder="你的名字" />
            </a-form-item>
            <a-form-item name="email" class="item" :rules="formCommentRules.email">
                <a-input v-model:value="formComment.email" placeholder="邮箱" />
            </a-form-item>
            <a-form-item name="webUrl" class="item">
                <a-input v-model:value="formComment.webUrl" placeholder="https//你的主页" />
            </a-form-item>
        </div>
        <a-form-item name="content" :rules="formCommentRules.content">
            <a-textarea class="content" v-model:value="formComment.content"></a-textarea>
        </a-form-item>
        <a-button type="primary" html-type="submit" class="submit">提交</a-button>
    </a-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { message } from 'ant-design-vue';
interface FormComment {
    author: string;
    email: string;
    webUrl: string;
    content: string
}

const formCommentRules = reactive({
    author: [{ required: true, message: '请输入名称' }],
    email: [{ required: true, message: '请输入邮箱' }, { type: 'email', message: '请输入有效邮箱地址' }],
    content: [{ required: true, message: '请输入内容' }],
});
const formComment = reactive<FormComment>({
    author: '',
    email: '',
    webUrl: '',
    content: ''
});


const onFinish = (values: any) => {
    message.success('评论成功');
    console.log('Success:', values);
};

const onFinishFailed = (errorInfo: any) => {
    message.error('请完整填写表单');
};

</script>


<style lang="less" scoped>
.comment_from {
    position: relative;
    overflow: hidden;
}

.header {
    display: flex;
    width: 100%;
    margin-top: 50px;

    .item {
        flex: 1;
        margin-right: 15px;

        &:last-child {
            margin-right: 0;
        }

        input {
            border: 1px solid var(--border-color);
            color: var(--content-color);
        }

    }
}


.content {
    width: 100%;
    height: 150px;
    font-size: 14px;
    padding: 15px;
    resize: none;
}


.submit {
    float: right;
    z-index: 9999;
}
</style>